<template>
    <div class="con">
        <div class="header" @click="share()">
            <img src="../assets/images/awardbanner.png" alt>
        </div>
        <div class="title">
            <p>{{title}}</p>
        </div>
        <dl v-for="(item,index) in data" :key="index">
            <dd>
                <img :src="item.icon" alt>
            </dd>
            <dt>
                <p>{{item.taskTitle}}</p>
                <span>{{item.taskViceTitle}}</span>
                <button v-if="item.taskStatus==0" @click="go(item.taskCode)">去完成</button>
                <button
                    v-else-if="item.taskStatus==1"
                    style="background:#21D39A"
                    @click="award(item.id)"
                >领取奖励</button>
                <button v-else style="background:#CDD0DA">已完成</button>
            </dt>
        </dl>
        <div style="height:50px"></div>
    </div>
</template>

<script>
export default {
    name: "award",
    data() {
        return {
            timestamp: "",

            data: {},
            title:""
        };
    },

    methods: {
        share() {
            this.$router.push({name: "shareh5"});
        },
        // 去完成
        go(code) {
            switch (code) {
                case "654839":
                    this.$router.push({ name: "register" });
                    break;
                case "135678":
                    this.$router.push({ name: "addsavecard" });
                    break;
                case "912382":
                case "126384":
                    this.$router.push({ name: "addcreditcard" });
                    break;
                case "314819":
                case "641394":
                case "093123":
                    this.$router.push({ name: "credit" });
                    break;
                case "000000":
                    this.$router.push({ name: "shareh5" });
                    break;
                default:
                    break;
            }
        },
        // 领取奖励
        award(id) {
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },
                url: `${
                    this.siteUrl
                }/app/active/getAwards?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: Number(localStorage.getItem("userId")),
                    taskId: id
                }
            })
                .then(response => {
                    console.log(response);
                    this.$toast(response.data.message);
                    this.select();
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        // 查询列表
        select() {
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },
                url: `${
                    this.siteUrl
                }/app/h5/h5GetAllActives?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: Number(localStorage.getItem("userId"))
                }
            })
                .then(response => {
                    console.log(response);
                    this.data = response.data.data.data;
                    this.title=response.data.data.title
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.select();
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
.con .header img {
    width: 90%;
    margin-left: 5%;
    margin-top: 24px;
}
.con .title {
    width: 90%;
    margin-left: 5%;
    color: #a6a9b5;
    margin-top: 24px;
    margin-bottom: 12px;
}

dl {
    width: 90%;
    height: 64px;
    margin-left: 5%;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px #f2f2f2;
    margin-top: 15px;
}

dl dd {
    float: left;
    width: 20%;
    height: 36px;
    margin-top: 14px;
}
dl dd img {
    width: 36px;
    height: 36px;
    margin-left: 14px;
}
dl dt {
    float: left;
    width: 80%;
    height: 36px;
    margin-top: 14px;
    position: relative;
}
dl dt span {
    font-size: 12px;
    color: #a6a9b5;
}
dl dt button {
    width: 63px;
    height: 28px;
    color: #fff;
    position: absolute;
    right: 10px;
    top: 3px;
    border-radius: 14px;
    background: #ff724f;
    font-size: 12px;
}
</style>
